import React, { Component } from 'react';
import { Space, Popover, Modal, Button, NavBar, Toast, Checkbox, Stepper } from 'antd-mobile'
import { SearchOutline, MoreOutline, CloseOutline, EyeFill, ContentOutline, AppstoreOutline, HeartOutline, UserOutline } from 'antd-mobile-icons'
import { Action } from 'antd-mobile/es/components/popover'
import Shoppaddress from '../../../components/shopping';
import request from "../../../api"
import "./cateshopp.css"
import { NavLink,Link,withRouter } from 'react-router-dom'



const actions: Action[] = [
    { key: '/index/home', icon: <ContentOutline />, text: '首页'},
    { key: '/index/classification', icon: <AppstoreOutline />, text: '分类搜索' },
    { key: '/index/cateshopp', icon: <HeartOutline />, text: '购物车' },
    { key: '/index/minecenter', icon: <UserOutline />, text: '我的京东' },
    { key: 'browse', icon: <EyeFill />, text: '浏览记录' },
]
const right = (
    <div style={{ fontSize: 24 }}>
        <Space style={{ '--gap': '16px' }} >
            <Popover.Menu
                
                mode='dark'
                actions={actions}
                
                placement='bottom-start'
                onAction={node => Toast.show(`选择了 ${node.text}`)}
                trigger='click'
                
            >
                <MoreOutline  />
            </Popover.Menu>
        </Space>
    </div>
)

interface Props {
    history:any,
    location:any,
    match:any
}
interface State {
    items: shoppItem[],
    money: number,
    bool:boolean
}
interface shoppItem {
    img1: string,
    proname: string,
    originprice: number,
    num: number,
    proid: string,
    cartid: string,
    flag: boolean
}
const id = localStorage.getItem("userid")
class Cateshopp extends Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            items: [],
            money: 0,
            bool:true

        }

    }
    //计算商品选中状态
    maxzhuangtai(){
        this.setState({bool:true})
        this.state.items.map((item, index) => {
            if (item.flag == false) {
                this.setState({bool:false})
            }
        })
    }
    looksopp() {
        
        request.cart.cart_list({ userid: id }).then((ok) => {
            if (ok.data.code === "200") {
                console.log(ok.data.data);
                
                this.setState({ items: ok.data.data }, () => {
                    this.summoney()
                    this.maxzhuangtai()
                })
            }else{
                this.setState({items:[]})
               

            }

        })
    }
    //请求购物车数据
    componentDidMount(): void {
        this.looksopp()
    }
    //计算总价
    summoney() {
        var sum = 0
        this.state.items.map((item, index) => {
            if (item.flag == true) {
                sum += item.num * item.originprice
            }
        })
        this.setState({ money: sum })
    }

    //加入购物车
    addshopp(v: any, pid: any, num: any, cid: any) {
        if (v >= 1) {
            request.cart.cart_add({ userid: id, proid: pid, num: num }).then((ok) => {

                this.looksopp()

            })
        } else {
            request.cart.cart_remove({ cartid: cid }).then((ok) => {
                this.looksopp()
            })

        }
    

    }
//更改购物车状态
 zhuangtai(cid:any,v:boolean){
    console.log(v);
    
    request.cart.cart_selectone({cartid:cid,flag:v}).then((ok)=>{
        console.log(ok.data);
       this.looksopp()
      
       
       
    })
}
back() {
    this.props.history.go(-1)
    console.log("返回上一层");

}
render() {
    return (
        <div className='cateshopp'>
            <NavBar right={right} style={{ "--border-bottom": "solid 1px #eee", }} onBack={this.back}>购物车</NavBar>
            <Shoppaddress></Shoppaddress>

            <div className='shangpin'>


                <Checkbox.Group
            
                >
                    <Space direction='vertical'>
                        {this.state.items.map((item, index) => {
                            return (
                                <div key={index}>
                                    <Checkbox checked={item.flag}
                                    onChange={(val)=>{
                                        this.zhuangtai(item.cartid,val)
                                    }}
                                    >
                                        <div className='kapian'>
                                            <img src={item.img1} alt="" />
                                            <div className='right'>
                                                <span>{item.proname}</span>
                                                <div className='right_bottom'>
                                                    <span className='money'>¥{item.originprice}</span>

                                                </div>

                                            </div>

                                        </div>

                                    </Checkbox>
                                    <Stepper

                                        className='bujinqi'
                                        // value={item.num}
                                        // defaultValue={item.num}
                                        value={item.num}
                                        onChange={(value) => {

                                            value > item.num ? this.addshopp(value, item.proid, "1", item.cartid) : this.addshopp(value, item.proid, "-1", item.cartid)

                                        }}

                                    />
                                </div>

                            )
                        })}
                    </Space>
                </Checkbox.Group>

            </div>
            <div className='jiesuan'>
                <Checkbox checked={this.state.bool}/>
                <p >
                    <span className='qian'>总计:¥<span>{this.state.money}</span></span>
                    <Button shape='rounded' color='danger'>结算</Button>
                </p>
            </div>

        </div>
    );
}
}

export default withRouter(Cateshopp);